import React, {useEffect, useState} from 'react';
import ReactECharts from 'echarts-for-react';
import {getBookAnalysisUsingGet} from "@/services/backend/analysisController";

const Top5Book: React.FC = () => {

  const [data, setData] = useState<API.BookAnalysisVO[]>([]);

  useEffect(() => {
    try {
      getBookAnalysisUsingGet().then(res => {
        if (res.data) {
          setData(res.data);
        }
      })
    } catch (e: any) {

    }
  }, [])

  const chartData = data.map(item => {
    return {
      value: item.allBorrowCount,
      name: item.title,
    }
  })


  const options = {
    title: {
      // text: '借阅量前五',
      // subtext: '借阅量前五',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    // legend: {
    //   orient: 'vertical',
    //   left: 'left'
    // },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: chartData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  return <ReactECharts option={options} />;
};

export default Top5Book;
